<template>
    <div class="vote-container">
        <nut-swiper :init-page="page" :pagination-visible="true"
            :style="{ height: `${listContainerHeight}px`, width: `${listContainerWidth}px` }" pagination-color="#5232B7">
            <nut-swiper-item v-for="(item, index) in list" :key="item.id">
                <image mode="widthFix" :style="{ width: `${listContainerWidth / 1.2}px` }" :src="item.image" />
            </nut-swiper-item>
        </nut-swiper>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
const list = ref([]);
const router = Taro.useRouter();
onMounted(() => {
    getListContainerHeight()
    list.value = JSON.parse(decodeURIComponent(router.params.list));  //解码 票码的数据
});
const listContainerHeight = ref(0)
const listContainerWidth = ref(0)
const getListContainerHeight = () => {
    const query = Taro.createSelectorQuery()
        .select(".vote-container")
        .boundingClientRect()
    query.selectViewport()
    query.exec(function (res) {
        if (res[0]) {
            listContainerHeight.value = res[0].height;
            listContainerWidth.value = res[0].width
        }
    });
}
</script>
<style lang="scss">
.page {
    height: 100%;

}

.vote-container {
    display: flex;
    height: 100%;
    padding: 0 30px;

    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .vote-container-img:nth-child(n + 2) {
        margin-top: 20px;
    }

    .vote-container-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nut-swiper-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
